<!--
 * @Descripttion: damage报损报溢新增
 * @version:
 * @Author: cxguo
 * @Date: 2019-08-17 20:26:23
 * @LastEditors: cxguo
 * @LastEditTime: 2019-11-21 10:55:42
 -->
<template>
  <div>
    <el-form
      ref="form"
      :model="dataObj"
      :inline="true"
      :rules="rules"
      label-position="right"
      label-width="100px"
      size="mini"
    >
      <h3>基础信息</h3>
      <el-divider />
      <div class="paddingTb20">
        <el-form-item :label="`${itemName}名称:`" prop="name">
          <el-input v-model="dataObj.name" />
        </el-form-item>
        <el-form-item :label="`${itemName}编号:`">
          <el-input v-model="dataObj.code" />
        </el-form-item>
        <el-form-item label="备注:">
          <el-input v-model="dataObj.remark" type="textarea" />
        </el-form-item><br>
        <el-form-item label="所属门店:" prop="shopId">
          <span v-if="operation === 'update'">{{ dataObj.shopName }}</span>
          <el-select
            v-if="operation === 'add'"
            v-model="dataObj.shopId"
            filterable
            placeholder="请选择"
            @change="onShopChange"
          >
            <el-option
              v-for="item in optionsData.shop"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </div>
      <h3>发货信息</h3>
      <el-divider />
      <div class="paddingTb20">
        <el-form-item label="联系人:">
          <el-input v-model="dataObj.contacter" />
        </el-form-item>
        <el-form-item label="电话:" prop="phone">
          <el-input v-model="dataObj.phone" />
        </el-form-item>
        <el-form-item label="邮箱:" prop="email">
          <el-input v-model="dataObj.email" />
        </el-form-item>
        <el-form-item label="邮编:" prop="postalCode">
          <el-input v-model="dataObj.postalCode" />
        </el-form-item>
        <el-form-item label="地址:">
          <el-input v-model="dataObj.address" />
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>
<script>
import { oftenuse } from '@/libs/mixins'
import { isEmail, isTelOrPhone } from '@/utils/validate'
import { getOptions } from '@/api/store/shop.js'
import { getDataById } from '@/api/store/store.js'

export default {
  name: 'StoreSave',
  mixins: [oftenuse],
  props: {
    operation: {
      type: String,
      default: null,
      validator: (value) => {
        return ['add', 'update'].indexOf(value) !== -1
      }
    },
    data: {
      type: Object,
      default: () => { return {} }
    }
  },
  data() {
    return {
      dataObj: {},
      optionsData: {
        shop: []
      },
      itemName: '仓库',
      rules: {
        name: [
          { required: true, message: '请填写仓库名称！', trigger: 'blur' }
        ],
        phone: [
          { validator: isTelOrPhone, trigger: 'blur' }
        ],
        email: [
          { validator: isEmail, trigger: 'blur' }
        ],
        shopId: [
          { required: true, message: '请选择所属门店！', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
  },
  watch: {
  },
  created() {
    this.initData()
  },
  methods: {
    valiData() {
      return this.handleValid('form')
    },
    getData() {
      const store = this.dataObj
      const shop = {
        id: store.shopId,
        name: store.shopName
      }
      return { store, shop }
    },
    getDataById(id) {
      getDataById(id).then(res => {
        if (res.data.flag) {
          this.dataObj = res.data.data
        } else {
          this.$notify.error({ title: '查询失败!', message: res.data.message })
        }
      })
    },
    onShopChange(val) {
      const shopOptions = this.optionsData.shop
      const arr = shopOptions.filter(item => { return item.value === val }) || []
      const obj = arr.length > 0 ? arr[0] : {}
      const name = obj.label
      this.$set(this.dataObj, 'shopName', name)
    },
    initData() {
      this.initOptionsData()
      if (this.operation === 'update') this.initUpdateData()
    },
    initUpdateData() {
      const id = this.data.id
      this.getDataById(id)
    },
    initOptionsData() {
      getOptions().then(res => {
        if (res.data.flag) {
          const data = res.data.data
          this.$set(this.optionsData, 'shop', data)
        }
      })
    }
  }
}
</script>

<style scoped>
.el-divider--horizontal{
  margin: 5px 0;
}
</style>
